<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书信息</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f1f1f1;
        }

        h1 {
            text-align: center;
            color: #4287f5;
            margin-bottom: 30px;
        }

        table {
            width: 100%;
            background-color: #fff;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #4287f5;
            color: #fff;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        input[type="text"] {
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #ddd;
            margin-right: 10px;
        }

        button {
            padding: 8px 16px;
            border-radius: 5px;
            background-color: #4287f5;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #3667c2;
        }

        button:disabled {
            background-color: #999;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>图书信息</h1>

    <div>
        <label for="searchTitle">按书名查询：</label>
        <input v-model="searchTitle" type="text" id="searchTitle">
        <button @click="searchByTitle">查询</button>
        <button @click="returnIndex">返回主页</a></button>
    </div>

    <table>
        <tr>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>类型</th>
            <th>状态</th>
            <th>简介</th>
            <th>操作</th>
        </tr>
        <tr v-for="book in books" :key="book.title">
            <td>{{ book.title }}</td>
            <td>{{ book.author }}</td>
            <td>{{ book.publisher }}</td>
            <td>{{ getCategoryName(book.categoryId) }}</td>
            <td :class="{'out-of-stock': book.stock === 0}">{{ getStockStatus(book.stock) }}</td>
            <td>{{ book.description }}</td>
            <td>
                <button @click="borrowBook(book)" :disabled="book.stock === 0">借阅</button>
            </td>
        </tr>
    </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            books: [],
            searchTitle: '',
        },
        methods: {
            searchByTitle() {
                $.ajax({
                    url: "/book/getBookByTitle",
                    type: "GET",
                    data: { title: this.searchTitle },
                    success: (data) => {
                        this.books = data;
                    }
                });
            },
            returnIndex(){
                location.href= "user_index.html";
            },
            borrowBook(book) {
                if (confirm("确定要借阅该图书吗？")) {
                    $.ajax({
                        url: "/book/borrowBook",
                        type: "POST",
                        data: JSON.stringify(book),
                        dataType: "JSON",
                        contentType: "application/json;charset/utf-8",
                        success: (json) => {
                            console.log(json);
                            book.stock--;
                        }
                    });
                }
            },
            getCategoryName(categoryId) {
                switch (categoryId) {
                    case 1:
                        return "文学类";
                    case 2:
                        return "历史类";
                    case 3:
                        return "计算机类";
                    case 4:
                        return "科学类";
                    case 5:
                        return "生活杂志";
                    case 6:
                        return "南昌时尚";
                    case 7:
                        return "食品安全";
                    default:
                        return "医学类";
                }
            },
            getStockStatus(stock) {
                return stock === 0 ? "库存短缺" : "库存充足";
            }
        },
        mounted() {
            $.ajax({
                url: "/book/getAllBooks",
                type: "GET",
                success: (data) => {
                    this.books = data;
                }
            });
        }
    });
</script>

</body>
</html>
